<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>w1001_1_dom</title>

		<script>
			window.onload = function() {
				//img 요소생성 <img>
				//속성조작1
				//img.src = "images/cat.png";
				//img.width="500";

				//버튼 클릭할 때 이미지 넣기
				var img = document.createElement("img");
				img.setAttribute("src", "images/cat.png");
				document.getElementById("btn01").onclick = function() {
					//속성조작2
					//element.setAttribute(attribute, attributevalue)
					//img.setAttribute("src", "images/cat.png");
					img.setAttribute("width", 500);
					window.document.body.appendChild(img);
				};
				//버튼 클릭할 때 이미지 빼기
				document.getElementById("btn02").onclick = function() {
					//var iObj = document.getElementsByTagName("img")[0];
					//document.body.removeChild(iObj);
					document.body.removeChild(img);

				};
				//이미지 너비 조작
				document.getElementById("btn03").onclick = function() {

					if (imgWidth.value == "") {
						alert('너비를 입력하세요');
					} else {
						img.setAttribute("width", imgWidth.value);
						window.document.body.appendChild(img);

					}
				};      

				// document.getElementById("imgWidths1").onclick = function() {
					// img.setAttribute("width", 100);
					// window.document.body.appendChild(img);
				// };
				// document.getElementById("imgWidths2").onclick = function() {
					// img.setAttribute("width", 200);
					// window.document.body.appendChild(img);
				// };
				// document.getElementById("imgWidths3").onclick = function() {
					// img.setAttribute("width", 300);
					// window.document.body.appendChild(img);
				// };

				document.getElementById("btn04").onclick = function() {
					//radio객체에 접근
					//radio객체의 모든 요소접근
					//선택되었으면 해당요소의 값을 가져와 이미지객체의 너비속성에 반영
					var ele = document.getElementsByName("imgWidths");
					for ( i = 0; i < ele.length; i++) {
						if (ele[i].checked) {
							img.setAttribute("width", ele[i].value);
							window.document.body.appendChild(img);
						}
					}
				};
				
				//select태그의 항목선택 시 이미지 조작
				document.getElementById("imgWS").onchange = function(){
					var choice = document.getElementById("imgWS").selectedIndex;
					//alert(document.getElementsByTagName("option")[x].label);
					//기존의 이미지너비 + user가 선택한 이미지 너비 값 
					//문자('100')+숫자('200') = '100200'
						var w = parseInt(img.getAttribute("width"))+parseInt(choice);
						img.setAttribute("width",w);
							window.document.body.appendChild(img);
				};

			};
		</script>
	</head>
	<body>
		<button id="btn01">
			img넣기
		</button>
		<button id="btn02">
			img빼기
		</button>
		* 너비:
		<input type="text" name="imgWidth" id="imgWidth"/>
		<button id="btn03">
			img조작
		</button>
		* 너비 라디오버튼:
		<input type="radio" name="imgWidths" id="imgWidths1" value="100"/>
		100
		<input type="radio" name="imgWidths" id="imgWidths2" value="200"/>
		200
		<input type="radio" name="imgWidths" id="imgWidths3" value="300"/>
		300
		<button id="btn04">
			img조작
		</button>
		<br/>
		*너비선택:
		<select name="imgWS" id="imgWS">
			<option value="0" label="0"> 증가분을 선택하세요 </option>
			<option value="50" label="50"> 50	 </option>
			<option value="100" label="100"> 100 </option>
			<option value="150" label="150">150 </option>
			<option value="200" label="200">200 </option>
		</select>
	</body>
</html>
